<template>
  <div class="loginmodal">
    <el-dialog
      :visible.sync="user.loginVisible"
      width="436px"
      :before-close="hidelog"
      :close-on-click-modal="false"
      custom-class="curstom-login"

    >
      <span slot="title">
        <img class="loginmodal-img" :src="require('../assets/3.png')" alt="" />
      </span>

      <p class="cl4d fs20 fw500 pb24">登录</p>

      <el-form :model="form"   ref="ruleForm"  :rules="rules">
        <el-form-item label="" prop="mobileOrEmail">
          <el-input
            placeholder="请输入手机号"
            v-model="form.mobileOrEmail"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input
            placeholder="密码"
            v-model="form.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item class="spite" label="" prop="imgcode" v-if="showImagcode">
          <el-input
            placeholder="图形验证码"
            v-model="form.imgcode"
            autocomplete="off"
          ></el-input>
          <img :src="captchaIdUrl" alt="" @click="getCaptchaId"/>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
        </el-form-item>
        <p class="fs13 cl9 flex jcs">
          <span class="curp" @click="toreg">注册</span>
          <span class="curp" @click="showf">忘记密码</span>
        </p>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { getCaptchaId, getCaptchaIdUrl, postLoginNormal } from '@/http/protocol'

export default {
  name: 'loginbox',
  computed: {
    ...mapState(['user']),
    captchaIdUrl () {
      console.log(this.captchaId)
      return getCaptchaIdUrl(this.captchaId)
    }
  },
  mounted () {
    this.getCaptchaId()
  },
  data () {
    var validateMobile = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号'))
      }
      callback()
    }
    return {
      form: {
        mobileOrEmail: '17602132468',
        password: '111111',
        imgcode: ''
      },
      rules: {
        mobile: [
          { validator: validateMobile, trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        imgcode: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      },
      captchaId: null,
      showImagcode: false

    }
  },
  methods: {
    ...mapMutations('user', ['hidelogin', 'showforget', 'showrigieter', 'setLoginS']),
    submitForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const { mobileOrEmail, password } = this.form

          const param = { mobileOrEmail, password }
          const res = await postLoginNormal(param)
          const { success } = res
          if (success) {
            this.hidelogin()
            // this.setLoginS(true)
            location.reload()
          } else {
            this.$err(res.msg)
            // if (res.errcode === '1120') {
            //   this.showImagcode = true
            // }
          }
          console.log(res)
          // eslint-disable-next-line no-debugger
          console.log(param)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    toreg () {
      this.hidelogin()
      this.showrigieter()
      this.hidelog()
    },
    showf () {
      this.hidelogin()
      this.showforget()
      this.hidelog()
    },
    hidelog () {
      this.hidelogin()
      this.resetForm('ruleForm')
    },
    async getCaptchaId () {
      const res = await getCaptchaId()
      const { success, data } = res
      if (success) {
        this.captchaId = data
        console.log(this.captchaId)
      }
    }
  }
}
</script>
<style lang="less" scope>
.loginmodal {
  .loginmodal-img {
    width: 107px;
    height: 51px;
  }
  .curstom-login {
    background: #fafafa;
    padding-bottom: 30px;
  }
  .el-input {
    input {
      height: 48px;
    }
  }
  .el-button {
    width: 100%;
    height: 48px;
  }
  .curp {
    &:hover {
      color: #009769;
    }
  }
  .spite {
    position: relative;
    img {
      position: absolute;
      right: 4px;
      top: 4px;
      width: 96px;
      height: 40px;
      border-radius: 2px;
      border: 1px solid #f4f4f4;
      cursor: pointer;
      &:hover {
          background: #f4f4f4;
      }
    }
    input {
        padding-right: 100px;
    }
  }
}
</style>
